.result:hover{
    box-shadow: 0 1px 3px rgba(0,0,0,.02), 0 16px 32px -4px rgba(0,0,0,.17);
    transform: translateY(-1px);
}.photo li{
     float: left;
     list-style: none;
     width: 20%;
     overflow: hidden;
     padding:10px;
 }
.photo li>div{
    background-color: #ffffff59;
    padding: 15px;
    position: relative;
    border-radius: 5px;
}
.photo li>div p{
    position: relative;
}
.photo li p:nth-of-type(1) a{
    width: 100%;
    height: 100%;
    display: inline-block;
}
.photo li p img{
    width: 100%;
    height:100%;
}
.desc-title{
    border-radius: 6px;
    padding: 5px;
}
.desc-title .titlePhoto{
    height: 20px;
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    color: #555;
}
.desc-title .see span{
    float: right;
}
.desc-title .see a {
    color: #686565;
}
.desc-title .see a i{
    font-style: normal;
    font-size: 10px;
}
.desc-title .see a:hover{
    color: #ff5744;
}

.photoI {
    height: 3px;
    position: absolute;
    display: inline-block;
    bottom: 3px;
    background-color: #5bbdff;
    border-radius: 10px;
}
.photo li:hover .photoI {
    -moz-animation: transationPhoto 1s ease-in;
    -webkit-animation: transationPhoto 1s ease-in;
    -o-animation: transationPhoto 1s ease-in;
    animation-fill-mode: forwards;
}

@keyframes transationPhoto
{
    from {width: 0;}
    to {width: 100%;}
}

@-moz-keyframes transationPhoto
{
    from {width: 0;}
    to {width: 100%;}
}
